<template>
  <view class="container">
    <view class="address_list">
      <card v-for="(item, index) in addressList" :key="item.addressId">
        <template v-slot:header>
          <text>{{ item.name }}</text>
        </template>
        <view class="address_info">
          <view class="item">
            <view class="mark">联系方式: </view>
            <view class="value">{{ item.phone }}</view>
          </view>
          <view class="item">
            <view class="mark">所属区域: </view>
            <view class="value">{{ item.area }}</view>
          </view>
          <view class="item">
            <view class="mark">详细地址: </view>
            <view class="value">{{ item.detailAddress }}</view>
          </view>
        </view>
        <view class="operation">
          <!-- <view>
            <u-radio-group v-model="isDefault">
              <u-radio
                activeColor="#234f9e"
                shape="circle"
                name="default"
                label="默认"
                >默认</u-radio
              >
            </u-radio-group>
          </view> -->
          <view style="display: flex">
            <view class="text" @click="editAddress(item)">
              <u-icon name="edit-pen"></u-icon> <text>编辑</text>
            </view>
            <view class="text" @click="deleteAddress(item, index)">
              <u-icon name="trash"></u-icon><text>删除</text>
            </view>
          </view>
        </view>
      </card>
      <view class="tip">{{ tip }}</view>
    </view>

    <view class="add_address">
      <m-button @clickHandle="increaseAddress">添加收货地址</m-button>
    </view>
    <u-modal
      :show="show"
      :title="title"
      :content="content"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      @cancel="cancel"
      @confirm="confirm"
    ></u-modal>
  </view>
</template>
<script>
import Button from "@/components/Button/index";
import { getAddressList, deleteAddress } from "@/api/Home/index";
import { mapGetters } from "vuex";
import Card from "@/components/Card/index";

export default {
  name: "address",
  components: {
    "m-button": Button,
    card: Card,
  },
  data() {
    return {
      isDefault: "default",
      addressList: [],
      show: false,
      title: "删除收货地址",
      content: "",
      deleteAddressId: "",
      index: -1,
      page: 1,
      limit: 5,
      tip: "",
      hasNextPage: false,
    };
  },
  computed: {
    ...mapGetters(["openId"]),
  },
  methods: {
    increaseAddress() {
      uni.navigateTo({
        url: "/pages/address/IncreaseAddress/index",
      });
    },
    getAddressList() {
      getAddressList(this.openId, this.page, this.limit)
        .then((result) => {
          const { data, hasNextPage } = result;
          this.addressList = this.addressList.concat(data);
          this.hasNextPage = hasNextPage;
          uni.stopPullDownRefresh();
        })
        .catch((err) => {
          this.addressList = [];
          uni.stopPullDownRefresh();
        });
    },
    editAddress(item) {
      uni.navigateTo({
        url: `/pages/address/IncreaseAddress/index?addressId=${item.addressId}`,
      });
    },
    deleteAddress(item, index) {
      this.content = `是否删除用户名为${item.name}的地址!`;
      this.deleteAddressId = item.addressId;
      this.index = index;
      this.show = true;
    },
    confirm() {
      uni.showLoading({
        title: "删除中!",
      });
      this.cancel();
      deleteAddress(this.deleteAddressId)
        .then((result) => {
          uni.showToast({
            title: "删除成功!",
            icon: "success",
            duration: 2000,
          });
          const array = JSON.parse(JSON.stringify(this.addressList));
          array.splice(this.index, 1);
          this.addressList = array;
          //this.getAddressList();
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: "删除失败!",
            icon: "error",
            duration: 2000,
          });
        });
    },
    cancel() {
      this.content = "";
      this.show = false;
    },
  },
  onLoad() {
    this.getAddressList();
  },
  onPullDownRefresh() {
    this.addressList = [];
    this.page = 1;
    this.limit = 5;
    this.getAddressList();
  },
  onReachBottom() {
    if (!this.hasNextPage) {
      this.tip = "到底了!";
      return;
    }
    this.page += 1;
    this.getAddressList();
  },
};
</script>
<style lang="scss">
.container {
  background-color: #f6f6f6;
  padding: 20rpx;
  height: 100%;
  .add_address {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    padding: 20rpx 10rpx;
    box-sizing: border-box;
  }
  .address_info {
    border-bottom: 1px solid #dcdfe6;
    .item {
      display: flex;
      justify-content: flex-start;
      padding: 18rpx 32rpx;
    }
  }
  .operation {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 32rpx;
    .text {
      display: flex;
      margin-right: 20rpx;
      text {
        margin-left: 10rpx;
        color: #4d4d4d;
      }
    }
  }
  .address_list {
    margin-bottom: 50px;
  }
  .mark {
    color: #8f8f8f;
  }
  .tip {
    text-align: center;
    font-size: 32rpx;
    color: #8f8f8f;
  }
}
</style>
